const layer= layui.layer
const form = layui.form
// =================获取文章信息=========
// 封装函数，方便后面复用
function getArtCate(){
    axios.get('/my/article/cates').then(({data:{data}})=>{
        const newStr = data.map(({name,alias,Id})=>{
            return `
            <tr>
                <td>${name}</td>
                <td>${alias}</td>
                <td>
                  <button data-id='${Id}' type="button" class="layui-btn layui-btn-xs btn_edit">编辑</button>
                  <button data-id='${Id}' type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete">删除</button>
                </td>
            </tr>
            `
        }).join('')
        $('#tbody').html(newStr)
    })
}
getArtCate()

// ===========点击添加按钮，弹出层出现============
// 声明变量，以便后面关闭弹出层
let indexAddForm
// 内容区样式
let addFormStr = `<form id="addForm" class="layui-form">
            <!-- 第一行 分类名称 -->
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                  <input type="text" name="name" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
    </div>
            <!-- 第二行 分类别名  -->
            <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                  <input type="text" name="alias" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
    </div>
            <!-- 第三行 按钮 -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
    </div>
</form>`
$('#btnAddCate').on('click',function(){
    indexAddForm = layer.open({
        content: addFormStr, //内容区
        type: 1,
        title:'添加文章分类', //标题区
        area: ['500px', '250px'] //弹框大小
      })
})

// =================添加分类功能-发送ajax请求=====================
// 需要使用事件委托写法（动态添加的弹出层）
$('body').on('submit','#addForm',function(e){
    e.preventDefault()
    const data = $(this).serialize()
    axios.post('/my/article/addcates',data).then(({data:{status,message}})=>{
        if(status !== 0){
            return layer.msg(message)
        }
        // 关闭弹出层
        layer.close(indexAddForm)
        //调用函数，重新渲染页面
        getArtCate()
        layer.msg('添加成功')
    })
})

// ===============编辑弹出层=================
let indexEditForm
let editFormStr = `<form id="editForm" class="layui-form" lay-filter='editForm'>
        <!-- 存Id -->
                <div class="layui-form-item layui-hide">
                   <label class="layui-form-label">Id</label>
        	<div class="layui-input-block">
            	<input type="text" name="Id" required  lay-verify="required" placeholder="Id" autocomplete="off" class="layui-input">
            </div>
        </div>    
            <!-- 第一行 分类名称 -->
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                  <input type="text" name="name" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
    </div>
            <!-- 第二行 分类别名  -->
            <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                  <input type="text" name="alias" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
    </div>
            <!-- 第三行 按钮 -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
    </div>
    </div>
</form>`;
$('body').on('click','.btn_edit',function(){
    const Id = $(this).attr('data-id')
    
    axios.get(`/my/article/cates/${Id}`).then(({data:{data}})=>{
       form.val('editForm',data)
    })
    
    indexEditForm = layer.open({
        content: editFormStr, //内容区
        type: 1,
        title:'修改文章分类', //标题区
        area: ['500px', '250px'] //弹框大小
      })
})

// =================根据Id来更新数据=============
$('body').on('submit','#editForm',function(e){
    e.preventDefault()
    const data = $(this).serialize()
    // 注意在编辑模块中加入Id框，并且隐藏，然后通过Id来更新数据
    axios.post('/my/article/updatecate',data).then(({data:{status,message}})=>{
        if(status !==0){
            return layer.msg(message)
        }
        layer.msg(message)
        layer.close(indexEditForm)
        getArtCate()
        layer.msg('更新成功')
    })
})


// ==================删除功能=================
$('body').on('click','.btn_delete',function(){
    let id = $(this).attr('data-id')
    layer.confirm('您确定要删除吗？', {icon: 3, title:'提示'}, function(index){
        axios.get(`/my/article/deletecate/${id}`).then(({data:{status,message}})=>{
            if(status !== 0){
             return layer.msg(message)
            }
            layer.msg(message)  
            layer.close(index)
        getArtCate() 
         })
         
      })
})